{{ define "js" }}
  <script src="/js/highcharts/highstock.min.js"></script>
  <script src="/js/highcharts/exporting.min.js"></script>
  <script src="/js/highcharts/wordcloud.min.js"></script>
  <script src="/js/highcharts/bellcurve.min.js"></script>
  <script src="/js/highcharts/highcharts-global-options.js"></script>
  <script src="/js/highcharts/drilldown.min.js"></script>

    <script>
        {{if .IsNormalChart}}
        Highcharts.chart('chart', {
            chart: {
                type: {{.Type}},
                height: 600,
            },
            rangeSelector: {enabled: false},
            title: {text: {{.Title}} },
            subtitle: {
                useHTML: true,
                text: {{.Subtitle}}
            },
            plotOptions: {
                column: {stacking: {{.StackingMode}} },
                {{ if .PlotOptionsPie }}pie: {{.PlotOptionsPie}},{{ end }}
                wordcloud: {
                    rotation: {
                        from: -10, to: 10, orientations: 5,
                    },
                    minFontSize: 8,
                    maxFontSize: 25,
                },
                series: {
                    {{ if .PlotOptionsSeriesCursor }}cursor: {{.PlotOptionsSeriesCursor}},{{end}}
                    events: {
                        {{ if .PlotOptionsSeriesEventsClick }}click: {{.PlotOptionsSeriesEventsClick}},{{end}}
                    }
                }
            },
            xAxis: {
                labels: {
                    {{ if .XAxisLabelsFormatter }}formatter: {{.XAxisLabelsFormatter}},{{end}}
                }
            },
            yAxis: [{
                type: 'logarithmic',
                title: {text: {{.YAxisTitle}} },
                opposite: false
            }],
            legend: {enabled: true},
            series: {{.Series}},
            navigator: {
                {{ if eq .Type "wordcloud" }}enabled: false,{{end}}
                {{ if eq .Type "pie" }}enabled: false,{{end}}
                xAxis: {
                    labels: {
                        {{ if .XAxisLabelsFormatter }}formatter: {{.XAxisLabelsFormatter}},{{end}}
                    }
                }
            },
            tooltip: {
                {{ if .TooltipFormatter }}formatter: {{.TooltipFormatter}},{{end}}
            }
        })
        {{else}}
        Highcharts.stockChart('chart', {
            responsive: {
            rules: [{
                condition: {
                    maxWidth: 400,
                },
                chartOptions: {
                    rangeSelector: {
                        /*
                        we use that rule, so when the screen becomes too small, the buttons can still be visible
                        on the screen and do not clip.
                        */
                        x: -20,
                    },
                },
            }],
            },
            chart: {
                type: {{.Type}},
                height: 600,
            },
            rangeSelector: {enabled: true},
            title: {text: {{.Title}} },
            subtitle: {
                useHTML: true,
                text: {{.Subtitle}}
            },
            plotOptions: {
                column: {
                    stacking: {{.StackingMode}},
                    {{ if .ColumnDataGroupingApproximation }}dataGrouping: {approximation: {{.ColumnDataGroupingApproximation}}},{{end}}
                    dataLabels: {
                        enabled: {{ .DataLabelsEnabled }},
                        {{ if .DataLabelsFormatter }} formatter: {{ .DataLabelsFormatter }}, {{end}}
                    },
                },
                wordcloud: {
                    rotation: {
                        from: -10, to: 10, orientations: 5,
                    },
                    minFontSize: 8,
                    maxFontSize: 25,
                },
                series: {
                    {{ if .PlotOptionsSeriesCursor }}cursor: {{.PlotOptionsSeriesCursor}},{{end}}
                    events: {
                        {{ if .PlotOptionsSeriesEventsClick }}click: {{.PlotOptionsSeriesEventsClick}},{{end}}
                    }
                }
            },
            xAxis: {
                type: 'datetime',
                labels: {
                    formatter: function () {
                        var epoch = timeToEpoch(this.value)
                        var orig = this.axis.defaultLabelFormatter.call(this)
                        return `${orig}<br/>Epoch ${epoch}`
                    }
                }
            },
            yAxis: [{
                title: {
                    text: {{.YAxisTitle}}
                },
                opposite: false
            }],
            tooltip: {
                {{ if .TooltipFormatter }}
                formatter: {{.TooltipFormatter}},
                {{ else }}
                formatter: function (tooltip) {
                    var orig = tooltip.defaultFormatter.call(this, tooltip)
                    var epoch = timeToEpoch(this.x)
                    orig[0] = orig[0] + '<span style="font-size:10px">Epoch ' + epoch + '</span>'
                    return orig
                },
                {{end}}
                shared: {{.TooltipShared}},
                useHTML: {{.TooltipUseHTML}},
                split: {{.TooltipSplit}},
                followPointer: {{.TooltipFollowPointer}},
            },
            legend: {enabled: true},
            series: {{.Series}},
        });
        {{end}}
    </script>
{{ end }}
{{ define "css" }}{{ end }}
{{ define "content" }}
  {{ with .Data }}
    <div class="container mt-2">
      <div class="my-3">
        <div class="d-md-flex py-2 justify-content-md-between">
          <h1 class="h4 mb-1 mb-md-0"><i class="fas fa-chart-line mr-2"></i>Network Charts</h1>
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb font-size-1 mb-0" style="padding:0; background-color:transparent;">
              <li class="breadcrumb-item"><a href="/charts" title="Charts">Charts</a></li>
              <li class="breadcrumb-item active" aria-current="page">{{ .Title }}</li>
            </ol>
          </nav>
        </div>
      </div>
      <div id="r-banner" info="{{ $.Meta.Templates }}"></div>
      <div class="card">
        <div class="card-body">
          <div id="chart" height="600"></div>
        </div>
      </div>
      {{ with .Footer }}
        <div style="padding-top: 5vh; font-size: 12px; font-style: italic;">
          <div style="display:flex;">
            <div style="padding-right: 5px;">
              <sup>1</sup>
            </div>
            <div>{{ . }}</div>
          </div>
        </div>
      {{ end }}
    </div>
  {{ end }}
{{ end }}
